<template>
    <div class="com-container">
        <div class="com-chart" ref='stock_ref'></div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {request} from 'network/request' 
    export default {
        name: '',
        data () {
            return {
                chartInstance:null,
                data:null,
                currentIndex:0,
                timeId:null
            }
        },
        created () {
            this.$socket.registerCallBack('stockData',this.getData)
        },
        mounted () {
            this.initChart()
            // this.getData()
            this.$socket.send({
                action:'getData',
                socketType:'stockData',
                chartName:'stock',
                value:''
            })
            window.addEventListener('resize',this.screenAdapter)
            this.screenAdapter()
        },
        destroyed () {
            clearInterval(this.timeId)
            this.$socket.unRegisterCallBack('stockData')
        },
        computed: {
            // 将vuex的state中theme属性值映射到计算属性中来
            ...mapState(['theme'])
        },
        methods:{
            initChart(){
                this.chartInstance=this.$echarts.init(this.$refs.stock_ref,this.theme)
                const initOption={
                    title:{
                        text:'▎库存与销量分析',
                        left:20,
                        top:20
                    },
                }
                this.chartInstance.setOption(initOption)
                this.chartInstance.on('mouseover',()=>{
                    clearInterval(this.timeId)
                })
                this.chartInstance.on('mouseout',()=>{
                    this.startInterval()
                })
            },
            getData(res){
                // const {data:Data}=await request({url:'/stock'})
                // this.data=Data
                this.data=res
                this.updateChart()
                this.startInterval()
            },
            updateChart(){
                const centerArr=[
                    ['18%','40%'],
                    ['50%','40%'],
                    ['82%','40%'],
                    ['34%','75%'],
                    ['66%','75%']
                ]
                const colorArr=[
                    ['#4FF778','#0BA82C'],
                    ['#E5DD45','#E8B11C'],
                    ['#E8821C','#E55445'],
                    ['#5052EE','#AB6EE5'],
                    ['#23E5E5','#2E72BF']
                ]
                const start=this.currentIndex*5
                const end=(this.currentIndex+1)*5
                const showData=this.data.slice(start,end)
                const seriesArr=showData.map((item,index)=>{
                    return {
                        name:item.name,
                        type:'pie',
                        center:centerArr[index],
                        hoverAnimation:false,//关闭鼠标移入到饼图的效果
                        labelLine:{
                            show:false
                        },
                        label:{
                            position:'center',
                            color:colorArr[index][0]
                        },
                        data:[
                            {
                                name:item.name+'\n\n'+item.sales,
                                value:item.sales,
                                itemStyle:{
                                    color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[
                                        {
                                            offset:0,
                                            color:colorArr[index][0]
                                        },
                                        {
                                            offset:1,
                                            color:colorArr[index][1]
                                        }
                                    ])
                                },
                                stock:item.stock
                            },
                            {
                                value:item.stock,
                                itemStyle:{
                                    color:'#333843'
                                },
                                stock:item.stock
                            }
                        ],
                        
                    }
                })
                const dataOption={
                    tooltip:{
                        show:true,
                        formatter:arg=>{
                            return `${arg.seriesName}<br/>销量 ${arg.data.value}<br/>库存 ${arg.data.stock}`
                        }
                    },
                    series:seriesArr
                }
                this.chartInstance.setOption(dataOption)
            },
            screenAdapter(){
                const titleFontSize=this.$refs.stock_ref.offsetWidth/100*3.6
                const innerRadius=titleFontSize*2.8
                const outterRadius=innerRadius*1.125
                let seriesAdapterArr=[]
                for(let n=0;n<5;n++){
                    seriesAdapterArr.push({
                            type:'pie',
                            radius:[innerRadius,outterRadius],
                            label:{
                                fontSize:titleFontSize/2
                            }
                        })
                }
                const adapterOption={
                    title:{
                        textStyle:{
                            fontSize:titleFontSize
                        }
                    },
                    series:seriesAdapterArr
                }
                this.chartInstance.setOption(adapterOption)
                this.chartInstance.resize()
            },
            startInterval(){
                if(this.timeId){
                    clearInterval(this.timeId)
                }
                this.timeId=setInterval(() => {
                    this.currentIndex++
                    if(this.currentIndex>1){
                        this.currentIndex=0
                    }
                    this.updateChart()
                }, 3000);
            }
        },
        watch: {
            // 对theme属性进行监听
            theme(){
                this.chartInstance.dispose()//销毁当前图表
                this.initChart()//重新初始化图表
                this.screenAdapter()//完成图表适配
                this.updateChart()//完成图表更新
            }
        }
    }
</script>

<style scoped>
 
</style>
